<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	function trans(){
		var elem = document.getElementsByTagName("li");
		for(var i=0;i<elem.length;i++){
			elem[i].onmouseover= function(e){
				this.style.backgroundColor = "blue";
				stopBubble(e);
			};
			elem[i].onmouseout = function(e){
				this.style.backgroundColor="white";
				stopBubble(e);
			};
		}
	}
	
	function divEvent(){
		document.getElementById("body").onmouseover=function(){
			this.style.backgroundColor="yellow";
		};
		document.getElementById("body").onmouseout=function(){
			this.style.backgroundColor="white";
		}
	}
	
	//이벤트 버블링 중지함수
	function stopBubble(e){
		if(e){
			e.stopPropagation();
		}else{
			window.event.cancelBubble=true;  //익스플로러 이벤트 버블링 중지
		}
	}
	
	//브라우저 기본동작을 막는 함수 (ex:a 태그를  클릭하면 해당 페이지로 이동한다)
	function stopDefault(e){
		if(e&&e.preventDefault){
			e.preventDefault();
		}else{
			window.event.returnValue=false;
		}
		return false;
	}
	function linkClick(){
		var iframe = document.getElementById("iframe");
		var a = document.getElementsByTagName("a");
		for(var i=0;i<a.length;i++){
			a[i].onclick=function(e){
				iframe.src = this.href;
				return stopDefault(e);
			};
		}
	}
	window.onload=function(e){
		trans();
		divEvent();
		linkClick();
	}
	
	
</script>
</head>
<body>
	<div id="body">
		<ul>
			<li>
				<a href="http://www.daum.net">Home--------------</a>
			</li>
			<li>
				<a href="/about/">about-----------</a>
			</li>				
		</ul>
		
		<div id="under">
			under the li
		</div>
	</div>
	<div id="frame">
		<iframe id="iframe"></iframe>
	</div>
</body>
</html>